<template>
  <div class="steps2 clmstart">
    <!-- title -->
    <div class="title">
      <p class="bigtitle">REGISTRATION SUMMARY</p>
      <p class="desc">
        TAKE A MOMENT TO REVIEW YOUR REGISTRATION BEFORE CONTINUING.
      </p>
    </div>
    <!-- container -->
    <div class="container" v-show="infos">
      <div class="infoitem">
        <p class="ititle">Registration Type</p>
        <p class="icont">{{ infos.reg_type }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Job Title</p>
        <p class="icont">{{ infos.job_title }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">
          First Name (Indicate your first name as on ID/passport)
        </p>
        <p class="icont">{{ infos.first_name }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">
          Last Name (Indicate your first name as on ID/passport)
        </p>
        <p class="icont">{{ infos.last_name }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">
          Name on badge (Indicate your preferred full name to be printed on the
          badge)
        </p>
        <p class="icont">{{ infos.name_on_badge }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Email Address</p>
        <p class="icont">{{ infos.email }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Mobile Number</p>
        <p class="icont">{{ infos.phone }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Property Name/Company Name</p>
        <p class="icont">{{ infos.property_name }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">MARSHA Code</p>
        <p class="icont">{{ infos.marsha_code }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Nationality</p>
        <p class="icont">{{ infos.nationality }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Market/Area</p>
        <p class="icont">{{ infos.market }}</p>
      </div>
      <!-- part 2 -->
      <div class="infoitem">
        <p class="ititle">Arrival Date</p>
        <p class="icont">{{ infos.arrival_date }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Arrival Time</p>
        <p class="icont">{{ infos.arrival_time }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Arrival Flight Number</p>
        <p class="icont">{{ infos.arrival_flight_number }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Arrival Train Number</p>
        <p class="icont">{{ infos.arrival_train_number }}</p>
      </div>
      <!-- part 3 -->
      <div class="infoitem">
        <p class="ititle">Any Allergies you want to make us aware of?</p>
        <p class="icont">{{ infos.any_allergies }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">Dietary Requirements</p>
        <p class="icont">
          {{ infos.dietary_req.toString() }}
        </p>
      </div>
      <div class="infoitem">
        <p class="ititle">Marriott Bonvoy Number</p>
        <p class="icont">{{ infos.marriott_bonvoy_number }}</p>
      </div>
      <div class="infoitem">
        <p class="ititle">
          I acknowledge that my personal data collected in connection with the
          registration and conduct of the event will be processed in accordance
          with the
          <a href="https://www.marriott.com/about/privacy.mi"
            >Marriott Group Global Privacy Statement</a
          >
        </p>
        <p class="icont">{{ infos.privacy ? "I Agree" : "" }}</p>
      </div>
      <!-- part 4 -->
      <div class="infoitem">
        <p class="ititle">Do you need Invoice/Fapiao?</p>
        <p class="icont">{{ infos.is_need_invoice }}</p>
      </div>
      <div class="fapiaoinfo" v-show="infos.is_need_invoice == 'Yes'">
        <div class="infoitem">
          <p class="ititle">Company Name</p>
          <p class="icont">{{ infos.company_name }}</p>
        </div>
        <div class="infoitem">
          <p class="ititle">Taxpayer identification number (duty paragraph)</p>
          <p class="icont">{{ infos.taxpayer_id }}</p>
        </div>
        <div class="infoitem">
          <p class="ititle">Company Address</p>
          <p class="icont">{{ infos.company_address }}</p>
        </div>
        <div class="infoitem">
          <p class="ititle">Telephone</p>
          <p class="icont">{{ infos.company_phone }}</p>
        </div>
        <div class="infoitem">
          <p class="ititle">Bank Name</p>
          <p class="icont">{{ infos.bank }}</p>
        </div>
        <div class="infoitem">
          <p class="ititle">Account Name</p>
          <p class="icont">{{ infos.bank_account }}</p>
        </div>
      </div>
      <div class="infobtnbox">
        <button type="button" @click="step2ToStep1">
          Return<span>&lt;&lt;</span>
        </button>
        <button type="button" @click="step2ToStep3">
          Confirm<span>>></span>
        </button>
      </div>
    </div>
    <div class="tkform clmcenter" v-show="tkshow">
      <div class="tkinfo clmcenter">
        <el-button
          type="success"
          :icon="icon"
          circle
          class="statusbtn"
        ></el-button>
        <p class="tkbigtxt">Thanks for registering</p>
        <p class="tknormaltxt">
          Stay on the page while we process your registration
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tkshow: false,
      icon: "el-icon-loading", //el-icon-check
    };
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  methods: {
    //cancel
    step2ToStep1() {
      this.$emit("step2ToStep1", true);
    },
    //confirm
    step2ToStep3() {
      this.tkshow = true;
      const params = {
        reg_type: this.infos.reg_type,
        job_title: this.infos.job_title,
        first_name: this.infos.first_name,
        last_name: this.infos.last_name,
        name_on_badge: this.infos.name_on_badge,
        email: this.infos.email,
        phone: this.infos.phone,
        property_name: this.infos.property_name,
        marsha_code: this.infos.marsha_code,
        nationality: this.infos.nationality,
        market: this.infos.market,
        any_allergies: this.infos.any_allergies,
        dietary_req: this.infos.dietary_req.toString(),
        marriott_bonvoy_number: this.infos.marriott_bonvoy_number,
        arrival_date: this.infos.arrival_date,
        arrival_time: this.infos.arrival_time,
        arrival_flight_number: this.infos.arrival_flight_number,
        arrival_train_number: this.infos.arrival_train_number,
        is_need_invoice: this.infos.is_need_invoice,
        company_name: this.infos.company_name,
        taxpayer_id: this.infos.taxpayer_id,
        company_address: this.infos.company_address,
        company_phone: this.infos.company_phone,
        bank: this.infos.bank,
        bank_account: this.infos.bank_account,
      };
      let url = "";
      if (this.$route.query.from == "already") {
        url = "/updateUserInfoByPhone";
      } else {
        url = "/userRegister";
      }
      this.$http.post(url, params).then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          this.icon = "el-icon-check";
          let ti = setTimeout(() => {
            this.tkshow = false;
            this.$emit("step2ToStep3", true);
            clearTimeout(ti);
          }, 2000);
        } else {
          this.tkshow = false;
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
          // console.log(res.data.msg);
        }
      });
    },
  },
  computed: {
    infos() {
      return this.$store.state.reginfo;
    },
  },
};
</script>
<style lang="less" scoped>
.steps2 {
  .title {
    width: 53%;
    padding-top: 3rem;
    p {
      text-align: center;
    }
    .bigtitle {
      font-size: 3rem;
      line-height: 1.3;
      font-family: "RidleyBold";
      color: rgb(28, 28, 28);
      font-style: normal;
      text-align: center;
    }
    .desc {
      width: 100%;
      margin-top: 0.5rem;
      background: #bdb9b8;
      font-family: "RidleyBold";
      font-size: 1.15rem;
      color: #ffffff;
      line-height: 3;
    }
  }
  //
  .container {
    width: 53%;
    margin-top: 4rem;
    .infoitem {
      width: 100%;
      text-align: left;
      border-bottom: 2px solid #fbe1d5;
      box-sizing: border-box;
      margin-bottom: 1rem;
      p {
        font-size: 1.125rem;
        color: #000000;
      }
      .ititle {
        font-family: "RidleyBold";
        line-height: 1;
      }
      .icont {
        font-family: "RidleyRegular";
        padding: 0.6rem 0;
      }
    }
    .infobtnbox {
      padding: 4rem 0;
      display: flex;
      button {
        min-width: 32%;
        font-family: "RidleyBold";
        font-size: 1.5rem;
        border-style: none;
        border: 0;
        color: #ffffff;
        line-height: 1.3;
        text-align: left;
        span {
          padding-left: 1rem;
        }
        padding-left: 2rem;
      }
      button:first-child {
        background: #000000;
      }
      button:last-child {
        background: #f18f61;
        margin-left: 2rem;
      }
    }
  }
  //
  .tkform {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    .tkinfo {
      min-width: 35%;
      min-height: 100px;
      background: #ffffff;
      border-radius: 0.3rem;
      padding: 3rem 1rem 5rem 1rem;
      p {
        text-align: center;
      }
      .tkbigtxt {
        font-family: "RidleyBold";
        font-size: 2rem;
        color: #000000;
      }
    }
  }
}
@media only screen and (max-width: 600px) {
  .steps2{
    .title{
      width: 90%;
      .bigtitle{
        font-size: 1.5rem;
      }
      .desc{
        font-size: 1rem;
        line-height: 1.5;
        padding: 0.5rem 0;
      }
    }
    .container{
      width: 90%;
      margin-top: 3rem;
      .infoitem{
        .ititle,.icont{
          font-size: 0.9rem;
        }
        .icont{
          padding: 0.4rem 0;
        }
      }
      .infobtnbox{
        padding: 1.5rem 0;
        button{
          font-size: 1rem;
          min-width: 45%;
        }
      }
    }
  }
}
</style>
<style>
.statusbtn {
  font-size: 3rem !important;
  margin: 1rem 0 2rem 0 !important;
}
</style>
